<template>
  <div class="flexC positionR"  :style="{ height: height }">
    <div class="echart_box" :style="{ height: height }"></div>
  </div>
</template>

<script>
export default {
  name: "ColumnEchartView",
  props: {
    barWidth: {
      type: String,
      default: "3",
    },
    height: {
      type: String,
      default: "98%",
    },
    colors: {
      type: Array,
      default() {
        return [];
      },
    },
    topNum: {
      type: Boolean,
      default: false,
    },
    arrX: {
      type: Array,
      default() {
        return [];
      },
    },
    arrY: {
      type: Array,
      default() {
        return [];
      },
    },
    arrY2: {
      type: Array,
      default() {
        return [];
      },
    },
    arrY3: {
      type: Array,
      default() {
        return [];
      },
    },
    arrY4: {
      type: Array,
      default() {
        return [];
      },
    },
    arrY5: {
      type: Array,
      default() {
        return [];
      },
    },
    legendData: {
      type: Array,
      default() {
        return ["", ""];
      }
    },
    rotate: {
      type: Number,
      default: 0,
    }, //旋转角度
    dw: {
      type: String,
      default: ''
    },
    dw2: {
      type: String,
      default: ''
    }
  },
  watch: {
    barWidth: function(val) {
      this.barWidth = val
    },
    dw: function(val) {
      this.dw = val
    },
    dw2: function(val) {
      this.dw2 = val
    },
    rotate: function(val) {
      this.rotate = val
    },
    colors: function(val) {
      this.colors = val;
    },
    topNum: function(val) {
      this.topNum = val
    },
    arrX: function(val) {
      this.arrX = val;
    },
    height: function(val) {
      this.height = val;
    },
    arrY2: function(val) {
      this.arrY2 = val;
    },
    arrY3: function(val) {
      this.arrY3 = val;
    },
    arrY4: function(val) {
      this.arrY4 = val;
    },
    arrY5: function(val) {
      this.arrY5 = val;
    },
    arrY: function(val) {
      this.arrY = val;
      this.columnEchartsInit(
        this.arrX,
        this.arrY,
        this.arrY2,
        this.arrY3,
        this.arrY4,
        this.arrY5,
        this.legendData,
      );
    },
  },
  mounted() {
    this.columnEchartsInit(
      this.arrX,
      this.arrY,
      this.arrY2,
      this.arrY3,
      this.arrY4,
      this.arrY5,
      this.legendData,
    );
  },
  methods: {
    columnEchartsInit(dataX, dataY, dataY2, dataY3, dataY4, dataY5, legendData) {
      let echartElement = this.$echarts.init(this.$el);
      echartElement.clear();
      let option = {
        tooltip: {
          trigger: "axis",
         // formatter:'{b0}:<br/>{c0}' + this.dw2,
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          top: "14%",
          left: "3%",
          right: "6%",
          bottom: "0",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLabel: {
            //坐标轴的字体颜色
            show: false,
            interval: 0,
            rotate: this.rotate,
            formatter:function(value){
              let valueTxt = ''
              if (value.length > 5) {
                valueTxt = value.substring(0, 4) + '...'
              } else {
                valueTxt = value
              }
              return valueTxt
            },
            textStyle: {
              color: "#FFFFFF",
            },
          },
          axisTick: { show: false },
          splitArea: { show: false },
          axisLine: {
            show: false,
          },
          splitLine: { show: false },
         /* boundaryGap: false,*/
        },
        calculable : true,
        yAxis: {
          name: this.dw,
          nameTextStyle: {
            color: "#fff",
            fontSize: 14,
          },
          type: "category",
          axisTick: { show: false },
          splitArea: { show: false },
          axisLine: { show: false },
          axisLabel: {
            interval: 0,
            //坐标轴的字体颜色
            show: false,
            textStyle: {
              color: "#FFFFFF",
            },
          },
          splitLine: {
            //横线显示
            show: false,
            lineStyle: {
              color: "rgba(0, 204, 255, .3)",
              width: ".5",
            },
          },
          boundaryGap: true,
          interval: 0,
          data: dataX
        },
        color: this.colors,
        series: [
          {
            name: legendData[0],
            type: "bar",
            barWidth: this.barWidth,
            data: dataY,
            silent: true,
            barGap:0,
            itemStyle: {
              normal: {
                color: function(params) {
                  var colorList = ['#63E3FB', '#E78862', '#41A0E2', '#6FF7B1']
                  return colorList[params.dataIndex]
                },
                label: {
                  show: this.topNum,		//开启显示
                  position: 'top',	//在上方显示
                  textStyle: {	    //数值样式
                    color: '#fff',
                    fontSize: 14
                  }
                }
              }
            }
          },
          {
            name: legendData[1],
            type: "bar",
            silent: true,
            barWidth: this.barWidth,
            data: dataY2,
          },

          {
            name: legendData[2],
            type: "bar",
            silent: true,
            barWidth: this.barWidth,
            data: dataY3,
          },

          {
            name: legendData[3],
            type: "bar",
            silent: true,
            barWidth: this.barWidth,
            data: dataY4,
          },
          {
            name: legendData[4],
            type:'line',
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 1,
                  type: 'solid',
                  color: '#01ECFD'
                }
              }
            }, // 线条样式
            symbolSize: 4, // 折线点的大小
            smooth: false,
            data: dataY5
          }
        ],
      };
      echartElement.setOption(option);
      window.addEventListener("resize", () => {
        echartElement.resize();
      });
    },
  },
};
</script>

<style scoped>
.echart_box {
  width: 98%;
  margin: 0 auto;
}

.pCharImage {
  width: 2.625rem;
  height: 1.75rem;
  margin-left: 1rem;
}
</style>
